<template>
  <div ref="lineBar" :style="{width:width,height:height}"></div>
</template>
<script>
export default {
  name: 'doubleLineChart',
  data() {
    return {
      data1:[460, 550, 750, 850, 800, 760, 460],
      data2:[2869, 2657, 3288, 3698, 3878, 3554,2869]
    }
  },
  props:{
    width:{
      type:String,
      default:""
    },
    height:{
      type:String,
      default:""
    },
  },
  mounted() {
    this.getEchart();
  },

  methods: {
    getEchart() {
      var myChartSports = this.$echarts.init(this.$refs.lineBar)
      var categorySports = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六','星期天']
      var dottedBaseSports = []
      var barDataSports = this.data1;
      var lineDataSports = this.data2;

      // option
      let optionSports = {
        backgroundColor: '#fff',
        tooltip: {
          borderColor: 'transparent',
          trigger: 'axis',
          backgroundColor: 'rgba(0,0,0,0.5)',
          axisPointer: {
            type: 'shadow',
            label: {
              show: true,
              backgroundColor: '#333'
            }
          },
          textStyle: {
            align: 'left',
            color: '#fff',
            fontSize: '12'
          }
        },
        legend: {
          data: ['运动量','步数'],
          textStyle: {
            color: '#ccc'
          }
        },
        grid: {
          left: '14%',
          top: '10%',
          right: '13%',
          bottom: '10%'
        },
        xAxis: {
          data: categorySports,
          axisLine: {
            lineStyle: {
              color: '#666'
            }
          }
        },

        yAxis: [
          {
            name: '运动量',
            splitLine: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#999'
              }
            },
            nameTextStyle: {
              color: '#999'
            },
            splitArea: {
              show: false
            }
          },
          {
            name: '步数',
            splitLine: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#999'
              }
            },
            nameTextStyle: {
              color: '#999'
            },
            splitArea: {
              show: false
            }
          },
        ],
        dataZoom:[
          {
            type: 'slider',
            realtime: true,
            start: 0,
            end: categorySports.length >= 15 ?40:100,  // 初始展示40%
            height: 4,
            fillerColor: "rgba(17, 100, 210, 0.42)", // 滚动条颜色
            borderColor: "rgba(17, 100, 210, 0.12)", 
            handleSize:0, // 两边手柄尺寸
            showDetail: false, // 拖拽时是否展示滚动条两侧的文字
            top:'96%',
            
            // zoomLock:true, // 是否只平移不缩放
            // moveOnMouseMove:true, //鼠标移动能触发数据窗口平移
            // zoomOnMouseWheel :true, //鼠标移动能触发数据窗口缩放
          },
          // { 
          //   type: "inside",  // 支持内部鼠标滚动平移
          //   start: 0,
          //   end: 40,
          //   zoomOnMouseWheel: false,  // 关闭滚轮缩放
          //   moveOnMouseWheel: true, // 开启滚轮平移
          //   moveOnMouseMove: true  // 鼠标移动能触发数据窗口平移 
          // }
        ],
        series: [
          {
            name: '运动量',
            type: 'line',
            smooth: true,
            showAllSymbol: true,
            symbol: 'emptyCircle',
            symbolSize: 8,
            yAxisIndex: 1,
            itemStyle: {
              normal: {
                color: '#0BA6E3'
              }
            },
            data: lineDataSports
          },
          {
            name: '步数',
            type: 'bar',
            barWidth: 10,
            itemStyle: {
              normal: {
                barBorderRadius: 5,
                color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#0CDF8A'
                  },
                  {
                    offset: 1,
                    color: '#3EACE5'
                  }
                ])
              }
            },
            data: barDataSports
          },
        ]
      }
      myChartSports.setOption(optionSports);
      window.addEventListener("resize", ()=>{
        myChartSports.resize();
      })
    }
  }
}
</script>
<style scoped>
/* @import url(); 引入css类 */
</style>
